<template>
  <PageWrapper contentClass="flex" contentFullHeight dense fixedHeight>
    <a-card class="m-b-16px">
      <div style="margin-bottom: 20px">
        <a-form :model="formState">
          <a-row :gutter="[20, 20]">
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.abnormal.columns.mac')">
                <a-input
                  allowClear
                  :placeholder="t('sys.abnormal.columns.mac')"
                  v-model:value="formState.mac"
                />
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-form-item :label="t('sys.abnormal.columns.type')">
                <a-select
                  :placeholder="t('sys.account.columns.status')"
                  allowClear
                  v-model:value="formState.type"
                >
                  <a-select-option :value="1">{{
                    t('sys.abnormal.option.loginError')
                  }}</a-select-option>
                  <a-select-option :value="2">{{
                    t('sys.abnormal.option.xpathError')
                  }}</a-select-option>
                  <a-select-option :value="3">{{
                    t('sys.abnormal.option.getPostError')
                  }}</a-select-option>
                  <a-select-option :value="4">{{ t('sys.abnormal.option.other') }}</a-select-option>
                </a-select>
                <!-- <a-input
                  allowClear
                  :placeholder="t('sys.abnormal.columns.type')"
                  v-model:value="formState.type"
                /> -->
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="6">
              <a-space>
                <a-button @click="Reactinquire" :icon="h(SearchOutlined)" type="primary">
                  {{ t('sys.form.placeholder.inquire') }}
                </a-button>
                <!-- <a-button @click="Addinquire" :icon="h(PlusOutlined)" type="primary">
                  {{ t('sys.account.addAccount') }}
                </a-button> -->
              </a-space>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card>
      <a-alert class="mb-2 mt-2" type="info" show-icon>
        <template #message>
          <div>
            <span>
              <div>
                <span class="ml-2">
                  {{ t('sys.abnormal.option.loginError') }} :
                  {{ exceptionStatisticsCount.type1 ? exceptionStatisticsCount.type1 : 0 }}
                  {{ t('sys.configuration.strip') }}
                </span>
                <span class="ml-2">
                  {{ t('sys.abnormal.option.xpathError') }} :
                  {{ exceptionStatisticsCount.type2 ? exceptionStatisticsCount.type2 : 0 }}
                  {{ t('sys.configuration.strip') }}
                </span>
                <span class="ml-2">
                  {{ t('sys.abnormal.option.getPostError') }} :
                  {{ exceptionStatisticsCount.type3 ? exceptionStatisticsCount.type3 : 0 }}
                  {{ t('sys.configuration.strip') }}
                </span>
                <span class="ml-2">
                  {{ t('sys.abnormal.option.other') }} :
                  {{ exceptionStatisticsCount.type4 ? exceptionStatisticsCount.type4 : 0 }}
                  {{ t('sys.configuration.strip') }}
                </span>
              </div>
            </span>
          </div>
        </template>
      </a-alert>
      <a-tabs @change="activeKeyChange" v-model:activeKey="activeKey">
        <a-tab-pane key="1" :tab="t('sys.abnormal.title')" />
        <!-- <a-tab-pane key="2" :tab="t('sys.account.business')" /> -->
      </a-tabs>
      <a-table
        @change="handleTableChange"
        :pagination="pagination"
        :loading="loading"
        bordered
        :scroll="{ x: 2000 }"
        rowKey="id"
        :columns="columns"
        :showExpandColumn="false"
        :dataSource="dataSource"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'type'">
            <span v-if="record.type == 1" color="orange">
              {{ t('sys.abnormal.option.loginError') }}
            </span>
            <span v-if="record.type == 2" color="green">
              {{ t('sys.abnormal.option.xpathError') }}
            </span>
            <span v-if="record.type == 3" color="green">
              {{ t('sys.abnormal.option.getPostError') }}
            </span>
            <span v-if="record.type == 4" color="green">
              {{ t('sys.abnormal.option.other') }}
            </span>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-drawer
      v-model:open="DrawerDetalsShow"
      class="custom-class"
      root-class-name="root-class-name"
      :title="addformState.id == null ? t('sys.account.addAccount') : t('sys.account.editAccount')"
      placement="right"
    >
      <a-form :label-col="{ span: 6 }" :model="addformState">
        <a-form-item :label="t('sys.login.userName')">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + t('sys.login.userName')"
            v-model:value="addformState.account"
          />
        </a-form-item>
        <a-form-item :label="t('sys.account.columns.password')">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + t('sys.account.columns.password')"
            v-model:value="addformState.password"
          />
        </a-form-item>
        <a-form-item label="cookies">
          <a-input
            allowClear
            :placeholder="t('sys.configuration.pleaseenter') + 'cookies'"
            v-model:value="addformState.cookes"
          />
        </a-form-item>
        <a-form-item :label="t('sys.errorLog.tableColumnType')">
          <a-select
            :placeholder="t('sys.configuration.pleasechoose') + t('sys.errorLog.tableColumnType')"
            v-model:value="addformState.accountType"
          >
            <a-select-option :value="1"
              >{{ t('sys.analysis.every') }}{{ t('sys.login.userName') }}</a-select-option
            >
            <a-select-option :value="2"
              >{{ t('sys.account.business') }}{{ t('sys.login.userName') }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item :label="t('sys.account.columns.status')">
          <a-select
            :placeholder="t('sys.form.placeholder.status')"
            v-model:value="addformState.status"
          >
            <a-select-option :value="0">{{ t('sys.configuration.blockUp') }}</a-select-option>
            <a-select-option :value="1">{{ t('sys.configuration.startUsing') }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-divider />
      <div style="display: flex; justify-content: flex-end">
        <a-button @click="ADDcomfig" type="primary" size="small">
          {{ t('sys.configuration.comfig') }}
        </a-button>
      </div>
    </a-drawer>
    <a-modal
      width="50%"
      v-model:open="logShow"
      :title="t('sys.configuration.log')"
      @ok="logShow = false"
    >
      <a-tabs v-model:activeKey="activeKey1">
        <a-tab-pane key="1" :tab="t('sys.configuration.courseLog')">
          <a-table
            :loading="tasklogLoading"
            :pagination="logpagination"
            @change="loghandleTableChange"
            :columns="processLogColumns"
            :dataSource="taskLogdataSource"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex == 'type'">
                <a-tag color="blue"> {{ t('sys.configuration.courseLog') }} </a-tag>
              </template>
              <template v-if="column.dataIndex == 'info'">
                {{ t('sys.configuration.info') }}'Mac :'{{ record.deviceMac
                }}{{ ',' + t('sys.script.columns.deiveName') }}{{ record.deviceNode }}
              </template>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import {
    deleteAcciybt,
    postAcciybtSave,
    postTaskExceptionPage,
    exceptionStatistics,
    postAcciybtUpdate,
    postaccountlog,
  } from '@/api/demo/device';
  import { message } from 'ant-design-vue';
  import { SearchOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { useI18n } from '@/hooks/web/useI18n';

  const { t } = useI18n();
  const ADDcomfig = () => {
    if (addformState.value.id != null) {
      postAcciybtUpdate(addformState.value).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          init();
          addformState.value = {};
          DrawerDetalsShow.value = false;
        }
      });
    } else {
      postAcciybtSave(addformState.value).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.api.operationSuccess'));
          init();
          addformState.value = {};
          DrawerDetalsShow.value = false;
        }
      });
    }
  };
  const deleteClick = (record) => {
    deleteAcciybt(record.id).then((res) => {
      if (res.code == 200) {
        message.success(t('sys.api.operationSuccess'));
        init();
      }
    });
  };
  const processLogColumns = [
    { title: 'ID', dataIndex: 'id', key: 'id' },
    { title: t('sys.device.columns.time'), dataIndex: 'createTime', key: 'createTime' },
    { title: t('sys.analysis.columns.type'), dataIndex: 'type', key: 'type' },
    { title: t('sys.configuration.log'), dataIndex: 'info', key: 'info' },
  ];
  const taskLogdataSource = ref([
    {
      id: 1,
      nodeTime: '2025-6-5',
      type: 1,
      info: '该用户分配给设备1,进行任务采集',
    },
  ]);
  const tasklogLoading = ref(false);
  const logShow = ref(false);
  const dataSource = ref([]);
  const formState = ref({});
  const addformState = ref({});
  const activeKey = ref('1');
  const activeKey1 = ref('1');
  const Reactinquire = () => {
    pagination.value.current = 1;
    init();
  };
  const columns = ref([
    {
      title: t('sys.abnormal.columns.id'),
      dataIndex: 'id',
      sorter: true,
      width: 120,
    },
    {
      title: t('sys.abnormal.columns.mac'),
      dataIndex: 'mac',
      width: 120,
    },
    {
      title: t('sys.abnormal.columns.type'),
      dataIndex: 'type',
      width: 120,
    },
    {
      title: t('sys.abnormal.columns.content'),
      dataIndex: 'content',
      width: 200,
    },
    {
      title: t('sys.abnormal.columns.path'),
      dataIndex: 'path',
      width: 120,
    },
    {
      title: t('sys.abnormal.columns.time'),
      dataIndex: 'time',
    },
  ]);
  const logaccountId = ref(null);
  const drawerlogShowClick = (record) => {
    logShow.value = true;
    logaccountId.value = record.id;
    logpagination.value.current = 1;
    logPage();
  };
  const logpagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });
  const logPage = () => {
    postaccountlog({
      accountId: logaccountId.value,
      current: logpagination.value.current,
      size: logpagination.value.pageSize,
    }).then((res) => {
      if (res.code == 200) {
        taskLogdataSource.value = res.data.records;
        logpagination.value.total = res.data.total;
      }
    });
  };
  const loading = ref(false);
  const DrawerDetalsShow = ref(false);
  const Addinquire = () => {
    DrawerDetalsShow.value = true;
  };
  const pagination = ref({
    total: 0,
    current: 1,
    pageSize: 10,
  });

  const drawerEditBoxClick = (record) => {
    DrawerDetalsShow.value = true;
    addformState.value = record;
    // selectValue.value = record.state;
    // getPersonalInfo(record.taskId).then((res) => {
    //   if (res.code == 200) {
    //     formDetails.value = res.data;
    //
    //   }
    // });
  };
  const exceptionStatisticsCount = ref({});
  const handleTableChange = (e: { pageSize: number; current: number }, filters, sorter: any) => {
    formState.value.sortName = sorter.field;
    formState.value.sortType = sorter.order;
    pagination.value = e;
    init();
  };
  const loghandleTableChange = (e) => {
    logpagination.value = e;
    logPage();
  };
  const init = () => {
    loading.value = true;
    postTaskExceptionPage({
      size: pagination.value.pageSize,
      current: pagination.value.current,
      ...formState.value,
    }).then((res) => {
      if (res.code == 200) {
        dataSource.value = res.data.records;
        pagination.value.total = res.data.total;
        loading.value = false;
      }
    });
    exceptionStatistics().then((res) => {
      if (res.code == 200) {
        res.data.forEach((item) => {
          exceptionStatisticsCount.value['type' + item.type] = item.count;
        });
        console.log('====================================');
        console.log(exceptionStatisticsCount);
        console.log('====================================');
      }
    });
  };
  onMounted(() => {
    init();
  });
  const activeKeyChange = (e) => {
    activeKey.value = e;
    init();
  };
</script>
<style scoped lang="less"></style>
